<script setup name="Index">
import { reactive } from "@vue/reactivity";
import indexApi from '@/api/client/index'
import * as echarts from 'echarts';
import {onMounted, ref} from "vue";
import option1Img from '@/assets/index/option1.png';
import option2Img from '@/assets/index/option2.png'
import option3Img from '@/assets/index/option3.png'
import option4Img from '@/assets/index/option4.png'
const option1 = ref({
  backgroundColor: '#ffffff',
  title:{
    text: '总访问量',
    textStyle: {
      fontWeight: '400'
    },
    subtext: '',
    subtextStyle: {
      color: '#333',
      fontSize: 20,
      fontWeight: '800'
    },
    left: 'left'
  },
  grid: {
    left: '5%',
    right: '2%',
    top: '60%',
    bottom: '15%',
    x: 30,
    y: 30,
    x1: 30,
    y1: 30
  },
  legend: {
    data:[' '],
    textStyle:{
      color:'#1890ff',
    },

    orient: 'horizontal',
    icon: `image://${option1Img}`,
    top: '0',
    right: '5%',
    itemGap: 10,
    itemWidth: 30,
    itemHeight: 30,
  },

  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      lineStyle: {
        color: '#1890ff',
      },
    },
  },
  xAxis: {
    show:false,
    type: 'category',
    boundaryGap: false, //顶头显示
    axisLine: {
      show: true,
      lineStyle: {
        color: '#3585d5',
      },
    },

    axisTick: {
      show: false,
      // alignWithLabel: true,
      lineStyle: {
        color: '#3585d5',
      },
    },
    axisLabel: {
      fontSize: 18,
    },
    data: [],
  },
  yAxis: {
    show:false,
    name: '%',
    type: 'value',
    axisLine: {
      show: true,
      lineStyle: {
        color: '#3585d5',
      },
    },
    splitLine: {
      show: false,
      lineStyle: {
        type: 'dotted',
        color: '#3585d5',
      },
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      fontSize: 16,
    },
    boundaryGap: false,
  },
  series: [
    {
      name: ' ',
      type: 'line',
      stack: '总量',
      smooth: true,
      symbol: 'none',
      showSymbol: true,
      symbolSize: 80,
      itemStyle: {
        normal: {
          color: '#1890ff',
          lineStyle: {
            color: '#1890ff',
            width: 3,
          },
          areaStyle: {
            //color: '#94C9EC'
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0.4,
                color: 'rgba(90, 185, 255,0)',
              },
              {
                offset: 1,
                color: 'rgba(90, 185, 255,0.5)',
              },
            ]),
          },
        },
      },
      data: [],
    },
  ],
})
const option2 = ref({
  backgroundColor: '#ffffff',
  title:{
    text: '文章数',
    textStyle: {
      fontWeight: '400'
    },
    subtext: '',
    subtextStyle: {
      color: '#333',
      fontSize: 20,
      fontWeight: '800'
    },
    left: 'left'
  },
  grid: {
    left: '5%',
    right: '2%',
    top: '60%',
    bottom: '15%',
    x: 30,
    y: 30,
    x1: 30,
    y1: 30
  },
  legend: {
    data:[' '],
    textStyle:{
      color:'#58c521',
    },

    orient: 'horizontal',
    icon: `image://${option2Img}`,
    top: '0',
    right: '5%',
    itemGap: 10,
    itemWidth: 30,
    itemHeight: 30,
  },

  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      lineStyle: {
        color: '#58c521',
      },
    },
  },
  xAxis: {
    show:false,
    type: 'category',
    boundaryGap: false, //顶头显示
    axisLine: {
      show: true,
      lineStyle: {
        color: '#58c521',
      },
    },

    axisTick: {
      show: false,
      // alignWithLabel: true,
      lineStyle: {
        color: '#58c521',
      },
    },
    axisLabel: {
      fontSize: 18,
    },
    data: [],
  },
  yAxis: {
    show:false,
    name: '%',
    type: 'value',
    axisLine: {
      show: true,
      lineStyle: {
        color: '#58c521',
      },
    },
    splitLine: {
      show: false,
      lineStyle: {
        type: 'dotted',
        color: '#58c521',
      },
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      fontSize: 16,
    },
    boundaryGap: false,
  },
  series: [
    {
      name: ' ',
      type: 'line',
      stack: '总量',
      smooth: true,
      symbol: 'none',
      showSymbol: true,
      symbolSize: 80,
      itemStyle: {
        normal: {
          color: '#58c521',
          lineStyle: {
            color: '#58c521',
            width: 3,
          },
          areaStyle: {
            //color: '#94C9EC'
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0.4,
                color: 'rgba(90, 185, 255,0)',
              },
              {
                offset: 1,
                color: '#58c521',
              },
            ]),
          },
        },
      },
      data: [],
    },
  ],
})
const option3 = ref({
  backgroundColor: '#ffffff',
  title:{
    text: '评论数',
    textStyle: {
      fontWeight: '400'
    },
    subtext: '',
    subtextStyle: {
      color: '#333',
      fontSize: 20,
      fontWeight: '800'
    },
    left: 'left'
  },
  grid: {
    left: '5%',
    right: '2%',
    top: '60%',
    bottom: '15%',
    x: 30,
    y: 30,
    x1: 30,
    y1: 30
  },
  legend: {
    data:[' '],
    textStyle:{
      color:'#faaf1d',
    },

    orient: 'horizontal',
    icon: `image://${option3Img}`,
    top: '0',
    right: '5%',
    itemGap: 10,
    itemWidth: 30,
    itemHeight: 30,
  },

  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      lineStyle: {
        color: '#faaf1d',
      },
    },
  },
  xAxis: {
    show:false,
    type: 'category',
    boundaryGap: false, //顶头显示
    axisLine: {
      show: true,
      lineStyle: {
        color: '#faaf1d',
      },
    },

    axisTick: {
      show: false,
      // alignWithLabel: true,
      lineStyle: {
        color: '#faaf1d',
      },
    },
    axisLabel: {
      fontSize: 18,
    },
    data: [],
  },
  yAxis: {
    show:false,
    name: '%',
    type: 'value',
    axisLine: {
      show: true,
      lineStyle: {
        color: '#faaf1d',
      },
    },
    splitLine: {
      show: false,
      lineStyle: {
        type: 'dotted',
        color: '#faaf1d',
      },
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      fontSize: 16,
    },
    boundaryGap: false,
  },
  series: [
    {
      name: ' ',
      type: 'line',
      stack: '总量',
      smooth: true,
      symbol: 'none',
      showSymbol: true,
      symbolSize: 80,
      itemStyle: {
        normal: {
          color: '#faaf1d',
          lineStyle: {
            color: '#faaf1d',
            width: 3,
          },
          areaStyle: {
            //color: '#94C9EC'
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0.4,
                color: 'rgba(90, 185, 255,0)',
              },
              {
                offset: 1,
                color: '#faaf1d',
              },
            ]),
          },
        },
      },
      data: [],
    },
  ],
})
const option4 = ref({
  backgroundColor: '#ffffff',
  title:{
    text: '用户数',
    textStyle: {
      fontWeight: '400'
    },
    subtext: '',
    subtextStyle: {
      color: '#333',
      fontSize: 20,
      fontWeight: '800'
    },
    left: 'left'
  },
  grid: {
    left: '5%',
    right: '2%',
    top: '60%',
    bottom: '15%',
    x: 30,
    y: 30,
    x1: 30,
    y1: 30
  },
  legend: {
    data:[' '],
    textStyle:{
      color:'#7735d2',
    },

    orient: 'horizontal',
    icon: `image://${option4Img}`,
    top: '0',
    right: '5%',
    itemGap: 10,
    itemWidth: 30,
    itemHeight: 30,
  },

  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      lineStyle: {
        color: '#7735d2',
      },
    },
  },
  xAxis: {
    show:false,
    type: 'category',
    boundaryGap: false, //顶头显示
    axisLine: {
      show: true,
      lineStyle: {
        color: '#7735d2',
      },
    },

    axisTick: {
      show: false,
      // alignWithLabel: true,
      lineStyle: {
        color: '#7735d2',
      },
    },
    axisLabel: {
      fontSize: 18,
    },
    data: [],
  },
  yAxis: {
    show:false,
    name: '%',
    type: 'value',
    axisLine: {
      show: true,
      lineStyle: {
        color: '#7735d2',
      },
    },
    splitLine: {
      show: false,
      lineStyle: {
        type: 'dotted',
        color: '#7735d2',
      },
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      fontSize: 16,
    },
    boundaryGap: false,
  },
  series: [
    {
      name: ' ',
      type: 'line',
      stack: '总量',
      smooth: true,
      symbol: 'none',
      showSymbol: true,
      symbolSize: 80,
      itemStyle: {
        normal: {
          color: '#7735d2',
          lineStyle: {
            color: '#7735d2',
            width: 3,
          },
          areaStyle: {
            //color: '#94C9EC'
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0.4,
                color: 'rgba(90, 185, 255,0)',
              },
              {
                offset: 1,
                color: '#7735d2',
              },
            ]),
          },
        },
      },
      data: [],
    },
  ],
})
// 曲线图（访问量趋势）
const option5 = ref({
  title: {
    text: '访问量趋势',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  grid: {
    x:30,
    y:45,
    x2:5,
    y2:20
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],
      type: 'line',
      smooth: true
    }
  ]
})

//饼图 （文章分类占比）
const option6 = ref({
  title:{
    text:'文章分类占比'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '50%',
    left: 'right',
    orient: 'vertical',
    align: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: true,
      label: {
        show: true,
      },
      labelLine:{
        length: 10,
        length2: 50,
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        },
        itemStyle:{
          shadowBlur: 10,
          shadowOffsetX:0,
          shadowColor: 'rgba(0,0,0,0.5)'
        }
      },
      data: []
    }
  ]
})
// 获取文章分类占比
const getArticleProportion =async () => {
  const result = await indexApi.getArticleProportion()
  option6.value.series[0].data = result.data
}
// 获取访问总量
const getAccessNum = async () => {
  const result = await indexApi.getAccessNum()
  option5.value.xAxis.data = result.data.map(item => item.name)
  const data = result.data.map(item => item.value)
  option5.value.series[0].data = data
}
// 获取最新动态
const dynamicInfo = ref([])
const getLastActivity = async () => {
  const result = await indexApi.getLastActivity()
  dynamicInfo.value = result.data
}
// 获取访问总量
const getTotalWatchNum = async () => {
  const result = await indexApi.getTotalWatchNum()
  option1.value.xAxis.data = result.data.map(item => item.name)
  option1.value.series[0].data = result.data.map(item => item.value)
  option1.value.title.subtext = result.data.map(item => item.value).reduce((a, b) => a + b)
}
// 获取文章数
const getTotalArticleNum = async () => {
  const result = await indexApi.getTotalArticleNum()
  option2.value.series[0].data = result.data.map(item => item.value)
  option2.value.title.subtext = result.data.map(item => item.value).reduce((a, b) => a + b)
}
// 获取评论数
const getCommentNum = async () => {
  const result = await indexApi.getCommentNum()
  option3.value.series[0].data = result.data.map(item => item.value)
  option3.value.title.subtext = result.data.map(item => item.value).reduce((a, b) => a + b)
}
// 获取用户数
const getUserNum = async () => {
  const result = await indexApi.getUserNum()
  option4.value.series[0].data = result.data.map(item => item.value)
  option4.value.title.subtext = result.data.map(item => item.value).reduce((a, b) => a + b)
}
onMounted(() => {
  getUserNum()
  getCommentNum()
  getTotalArticleNum()
  getTotalWatchNum()
  getArticleProportion()
  getAccessNum()
  getLastActivity()
})

</script>
<template>
  <div class="app-container home">
    <el-row :gutter="30">
      <el-col :span="6" :xs="12">
        <el-card body-style="padding:10px;height:150px;">
          <v-chart :option="option1" autoresize/>
        </el-card>
      </el-col>
      <el-col :span="6" :xs="12">
        <el-card body-style="padding:10px;height:150px;">
          <v-chart :option="option2" autoresize/>
        </el-card>
      </el-col>
      <el-col :span="6" :xs="12">
        <el-card body-style="padding:10px;height:150px;">
          <v-chart :option="option3" autoresize/>
        </el-card>
      </el-col>
      <el-col :span="6" :xs="12">
        <el-card body-style="padding:10px;height:150px;">
          <v-chart :option="option4" autoresize/>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="30">
      <el-col :span="12">
        <el-card body-style="height:400px;padding:10px;">
          <v-chart :option="option5" autoresize/>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card body-style="height:400px;padding:10px;">
          <v-chart :option="option6" autoresize></v-chart>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-card body-style="min-height:200px;">
          <template #header>
            <div class="top-header">
              <h4>最新动态</h4>
<!--              <el-button type="primary" size="small">写文章</el-button>-->
            </div>
          </template>
<!--          <el-empty></el-empty>-->
          <el-table :data="dynamicInfo">
            <el-table-column label="文章标题" prop="targetName"></el-table-column>
            <el-table-column label="作者" prop="targetAuthorName"></el-table-column>
            <el-table-column label="发布日期" prop="createTime"></el-table-column>
            <el-table-column label="状态" prop="status">
              <template #default="scope">
                <el-tag type="success" v-if="scope.row.status == 4">已发布</el-tag>
                <el-tag type="info" v-else>草稿</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.el-row{
  margin-bottom: 20px;
}
.echarts {
  width: 100%;
  height: 100%;
}
.top-header{
  h4{
    margin: 0;
  }
  display: flex;
  justify-content: space-between;
}
</style>

